<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{{ROOT}}/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/lhh_lib.css" />
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/zh_tab.css" />
    <link rel="stylesheet" type="text/css" href="{{ROOT}}/css/bootstrap-datetimepicker.css" />
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="{{ROOT}}/js/html5shiv.js"></script>
    <![endif]-->

</head>
<body class="content">
<div class="row _lhh_breadcrumb MB10 visible-lg">
    <ul class="breadcrumb pull-left">
        <li><a href="index.html">首页</a></li>
        <li class="active">上网电量－辐射量对比图</li>
    </ul>
    <div class="p-rel">
        <div class="_lhh_breadcrumb-more MR15">
            <!--电子时钟 begin-->
            <include file="{{ROOT}}/controllers/include/clock.html" dataType="html"></include>
            <!--电子时钟 end-->
        </div>
    </div>
</div>
<div class="row">
    <div class="col-mod-12">
        <div class="page-header">
            <div class="ML10 MT10">
                <label class="MR5">统计方式</label>
                <select type="select" id="dateSelect" class="form-control">
                    <option dateType="2">按月统计</option>
                    <option dateType="3">按日统计</option>
                </select>
                <label class="MR5 ML30">年月</label>
                <input size="16" type="text" value="2012-06-15" readonly class="form_datetime form-control">
                <label class="MR5 ML30">类型</label>
                <select type="select" class="form-control">
                    <option>上网电量-辐射量对比</option>
                </select>
                <button type="submit" class="btn page-header-btn ML30">查询</button>
            </div>
        </div>
    </div>
</div>
<div class="row MB30">
    <div class="col-md-12 MT20">
        <div class="echarts" style="height: 400px;width:100%;" id="echarts-column-chart"></div>
    </div>
</div>
</body>
</html>


<script type="text/javascript" src="{{ROOT}}/js/highstock.js"></script>
<script type="text/javascript" src="{{ROOT}}/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="{{ROOT}}/js/datetimepicker-custom.js"></script>



<script type="text/javascript">
    LAMJS.main(function(){
        'use strict';
        var System=this;

        function highstock(){
            var seriesOptions = [],
                    seriesCounter = 0,
                    names = ['MSFT', 'AAPL'];
            $.each(names, function (i, name) {
                $('#echarts-column-chart').highcharts({
                    chart: {
                        height: 620,
                        zoomType: 'xy',
                        plotBackgroundColor:'#eef4ff'                    //绘图区背景色
                    },
                    title: {
                        text: '2015年8月 上网电量－辐射量对比图',
                        style:{
                            fontFamily:'SimHei'
                        }
                    },
                    credits: {
                        enabled:false                                    //不显示版权标签
                    },
                    xAxis: [{
                        categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        gridLineWidth: 1,
                        gridLineDashStyle:'Dash'

                    }],
                    yAxis: [{ // Primary yAxis
                        gridLineWidth: 1,
                        gridLineDashStyle:'Dash',
                        title: {
                            text: '上网电量',
                            style: {
                                color: '#000'
                            }
                        },
                        labels: {
                            style: {
                                color: '#aadd8f'
                            }
                        }

                    }, { // Secondary yAxis
                        gridLineWidth: 1,
                        gridLineDashStyle:'Dash',
                        labels: {
                            style: {
                                color: '#bbbbbb'
                            }
                        },
                        title: {
                            text: '辐射量',
                            style: {
                                color: '#000'
                            }
                        }

                    }, { // Tertiary yAxis
                        gridLineWidth: 1,
                        gridLineDashStyle:'Dash',
                        title: {
                            text: '综合效率',
                            style: {
                                color: '#AA4643'
                            }
                        },
                        labels: {
                            style: {
                                color: '#AA4643'
                            }
                        },
                        opposite: true
                    }],
                    plotOptions: {
                        line: {
                            dataLabels: {
                                enabled: true
                            },
                            enableMouseTracking: false
                        }
                    },
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom',
                        borderWidth: 2
                    },
                    series: [{
                        name: '上网电量(kWh)',
                        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,176.0, 49.9,106.4, 129.2, 144.0, 176.0,144.0,135.6, 71.5,129.2,148.5,106.4,194.1, 95.6,
                            49.9, 71.5, 54.4,216.4,100],
                        tooltip: {
                            valueSuffix: 'kWh'
                        }
                    }, {
                        name: '辐射量(MJ/m)',
                        yAxis:1,
                        data: [1016, 1000,1010.2, 1013.1, 1016.9, 1018.2,1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7,1009.5, 1009.6, 1016.7,1016,1015.9, 1015.5, 1012,1016, 1016.7, 1016,1009.6,1015.5,1015.9,1016,1012],
                        // marker: {
                        //     enabled: false      //不显示数据点
                        // },
                        tooltip: {
                            valueSuffix: 'MJ/m'
                        }
                    }, {
                        name: '综合效率(%)',
                        yAxis: 2,
                        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6,10.0,13,4.5,16.8,20.0,15.5,20.0,22,35,12.9,26,32,18,33,10,20,25,28,20],
                        tooltip: {
                            valueSuffix: '%'
                        }
                    }]
                });
            });

        }

        /**
         *
         * @param (String)date  NOT NULL
         * @param (Object)D     NOT NULL
         * example:
         *          dateChange("2012-06",{format: type,minView:2})
         */
        function dateChange(date,D){
            $('.form_datetime').val(date)
                    .datetimepicker(D);

        }

        function initDate(){
            $(".form_datetime").datetimepicker({format: 'yyyy-mm-dd',minView:2});

            var $dateInput = $('.form_datetime');
            var date,type;
            $('#dateSelect').change(function(){
                var type=$(this).children('option:selected').attr('dateType');
                //type :1 年 ，2 月，3 日
                switch(type){
                    case '1':
                        break;
                    case '2':
                        date="2012-06";
                        type="yyyy-mm";
                        dateChange(date,{format: type,minView:2});
                        $dateInput.val(date);
                        break;
                    case '3':
                        date="2012-06-01";
                        type="yyyy-mm-dd";
                        dateChange(date,{format: type,minView:2});
                        $dateInput.val(date);
                        break;

                    default :
                }
            });
        }

        $(function(){

            initDate();
        });



        $(window).resize(function() {
            highstock();
        }).trigger('resize');



    });
</script>








